<!doctype html>
<html>
<head>
    <title>LayIM移动版测试</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
{{--    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.mobile.css" media="all">--}}
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
{{--    <link id="layuicss-skinlayim-mobilecss" rel="stylesheet" href="../layuiadmin/layui/css/modules/layim/layim.css"--}}
{{--          media="all">--}}

</head>
<script src="../layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'mobile',], function () {
        var $ = layui.$
            , mobile = layui.mobile
            , layim = mobile.layim;

        $.get("{{url('chat/list')}}", function (data) {
            if (data.msg === "用户未登录") {
                layer.msg('用户未登录', {
                    icon: 2,
                    time: 1500 //2秒关闭（如果不配置，默认是3秒）
                }, function () {
                    window.location.href = "{{route('manager_login')}}";
                });
                return false;
            }


            layim.config({
                init: {
                    mine: data.data.mine,
                    friend: data.data.friend,
                    group: data.data.group,
                }

                // , brief: false  //简约模式
                // , tabIndex: 1             //tab-bar下表 从0开始
                // , title: '微聊'             //面板title
                // , chatTitleColor: "#36373C"    //面板背景颜色
                , isgroup: true              //开启群聊
                // , isNewFriend: true       //开启新朋友 默认开启
                // , notice: false           //开启消息提醒 默认开启
                {{--//上传图片接口--}}
                {{--, uploadImage: {--}}
                {{--    url: '{{url('chat/upload_img')}}' //（返回的数据格式见下文）--}}
                {{--}--}}


                //扩展“更多”的自定义列表，下文会做进一步介绍（如果无需扩展，剔除该项即可）
                , moreList: [
                    {
                        alias: 'system'
                        , title: '消息中心'
                        , iconClass: 'layui-icon-speaker' //图标字体的class类名
                    },
                    {
                        alias: 'find'
                        , title: '发现'
                        , iconUnicode: '&#xe628;' //图标字体的unicode，可不填
                        , iconClass: '' //图标字体的class类名
                    },
                ]

                // //扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
                // ,tool: [{
                //     alias: 'code' //工具别名
                //     ,title: '代码' //工具名称
                //     ,iconUnicode: '&#xe64e;' //工具图标，参考图标文档，可不填
                //     ,iconClass: '' //图标字体的class类名
                // }]


            });
        });


        //监听点击更多列表
        layim.on('moreList', function (obj) {
            switch (obj.alias) { //alias即为上述配置对应的alias
                case 'find': //发现
                    layer.msg('自定义发现动作');
                    break;
                case 'system':
                    $.get('{{url('chat/add_list')}}', function (res) {
                        var friend = '', group = '', system = '';
                        if (res.msg === 'success') {

                            $.each(res.data, function (index, el) {
                                console.log(index, el);
                                if (el.type === 0) {
                                    system += '<li><div><img src="' + el.avatar + '"></div><span>' + el.nick_name + '</span><span style="float: right;margin-top: 5px">' +
                                        '<a class="layui-btn layui-btn-sm" href="javascript:;" onclick="add_group(\'' + el.id + '\')">同意</a>' +
                                        '<a class="layui-btn layui-btn-sm layui-btn-danger" href="javascript:;" onclick="add_group(\'' + el.id + '\')">拒绝</a>' +
                                        '</span></li>';
                                }
                                if (el.type === 1) {
                                    friend += '<li><div><img src="' + el.avatar + '"></div><span>' + el.nick_name + '</span><span style="float: right;margin-top: 5px">' +
                                        '<a class="layui-btn layui-btn-sm add_assent' + index + '" href="javascript:;"  onclick="add_assent(\'' + el.id + '\',\'' + index + '\')">同意</a>' +
                                        '<a class="layui-btn layui-btn-sm layui-btn-danger add_assent' + index + '" href="javascript:;" onclick="add_assent(\'' + el.id + '\',\'' + index + '\')">拒绝</a>' +
                                        '</span><p>好友申请</p></li>';
                                }
                                if (el.type === 2) {
                                    group += '<li><div><img src="' + el.avatar + '"></div><span>' + el.nick_name + '</span><span style="float: right;margin-top: 5px">' +
                                        '<a class="layui-btn layui-btn-sm add_assent' + index + '" href="javascript:;" onclick="add_assent(\'' + el.id + '\',\'' + index + '\')">同意</a>' +
                                        '<a class="layui-btn layui-btn-sm layui-btn-danger add_assent' + index + '" href="javascript:;" onclick="add_assent(\'' + el.id + '\',\'' + index + '\')">拒绝</a>' +
                                        '</span><p>加入:' + el.group_name + ' 群</p></li>';
                                }
                            });
                            if (system.length > 1) {
                                friend = '<ul class="layui-btn-danger layui-btn-radius" style="text-align: center;"> <p class="">系统消息 </p></ul>' + friend
                            }
                            if (friend.length > 1) {
                                friend = '<ul class="layui-btn-warm layui-btn-radius" style="text-align: center;"> <p class="">好友请求 </p></ul>' + friend
                            }
                            if (group.length > 1) {
                                friend = '<ul class="layui-btn-normal layui-btn-radius" style="text-align: center;"> <p class="">加群请求 </p></ul>' + friend
                            }
                            layim.panel({
                                title: '消息中心',
                                tpl: '<div id="add-list" class="layim-tab-content layui-show" style="margin-top: 10px">' +
                                    '<ul class="layim-list-friend">' +
                                    '<ul class="layui-layim-list layui-show layim-list-history">' +
                                    system + friend + group +
                                    '</ul>' +
                                    '</ul></div>',
                                data: { //数据
                                    data: ''
                                }
                            });
                        }
                    });

                    break;

            }
        });
        //监听查看更多记录
        layim.on('chatlog', function (data, ul) {
            console.log(data); //得到当前会话对象的基本信息
            console.log(ul); //得到当前聊天列表所在的ul容器，比如可以借助他来实现往上插入更多记录

            //弹出一个更多聊天记录面板
            layim.panel({
                title: '与 ' + data.username + ' 的聊天记录' //标题
                , tpl: '这里是模版，@{{d.data.test}}' //模版
                , data: { //数据
                    test: 'Hello'
                }
            });
        });
        //监听点击“新的朋友”
        layim.on('newFriend', function () {
            //弹出面板
            layim.panel({
                title: '新的朋友' //标题
                , tpl: '<div class="search" style="padding: 10px;"><div class="layim-chat-send">' +
                    '<input id="add-new-friend-input" type="text" placeholder="好友账号/群账号" autocomplete="off">' +
                    '<button id="add-new-friend-btn">搜索</button></div></div>'
                , data: { //数据
                    test: '么么哒'
                }
            });

            //也可以直接跳转页面，如：
            //location.href = './newfriend'
        });

        layim.on('detail', function (data) {
            console.log(data); //获取当前会话对象，包含了很多所需要的信息
            //以查看群组信息（如成员）为例
            $.get('abc.com/detail/', {id: data.id}, function (res) {
                //弹出面板
                layim.panel({
                    title: data.name + ' 聊天信息' //标题
                    , tpl: '<div style="padding: 10px;">自定义模版，@{{d.data.test}}</div>' //模版，基于laytpl语法
                    , data: { //数据
                        rows: res.rows //假设rows为群组成员
                    }
                });
            });
        });

//socket相关
        var socket = new WebSocket('ws://localhost:7272');
        var uuid = Math.ceil(Math.random() * 1000);
        var nick_name;
        //连接成功时触发
        socket.onopen = function () {
            console.log("连接服务端");
        };
        socket.error = function () {
            console.log("出错了");
        };
        socket.close = function () {
            console.log("关闭了");
        };


        //捕捉socket端发来的事件
        socket.onmessage = function (event) {
            var e = JSON.parse(event.data);
            switch (e.type) {
                //用户上线
                case 'online':
                    online(e);
                    break;
                //获取当前在线人数
                case 'nowonline':
                    $(".num").text(e.num);
                    break;
                case 'offline':
                    layim.setFriendStatus(e.id, 'offline');
                    layer.msg('对方不在线');
                    break;

                //处理聊天消息
                case 'msg':
                    msg(e.msg);
                    break;
                case 'getMessage':
                    console.log('getMessage', e);
                    layim.getMessage(e.content);
                    break;

                //用户不在线
                case 'outline':
                    outline();
                    break;
                //用户不在线
                case 'error':
                    layer.msg(e.msg)
                    break;
                case 'friend':
                    // layer.open({
                    //     type: 1,
                    //     title:'好友请求',
                    //     area: ['300px', '200px'],
                    //     btn: ['同意', '拒绝'],
                    //     content: '传入任意的文本或html' //这里content是一个普通的String
                    //     ,yes: function(index, layero){
                    //        layer.msg('同意');
                    //         layim.chat({
                    //             name: '在线客服一' //名称
                    //             ,type: 'friend' //聊天类型
                    //             ,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像
                    //             ,id: 111 //定义唯一的id方便你处理信息
                    //         });
                    //         layer.close(index);
                    //     }
                    //     ,btn2: function(index, layero){
                    //         layer.msg('拒绝');
                    //         layer.close(index);
                    //     }
                    //     ,cancel: function(){
                    //         //layer.msg('关闭按钮');
                    //     }
                    // });
                    break;
                case 'bind':
                    $.post("{{url('chat/bind')}}", {
                        _token: '{{csrf_token()}}',
                        client_id: e.client_id
                    }, function (res, status, xhr) {
                        if (res.msg === 'success') {
                            uuid = res.data.uid;
                            nick_name = res.data.nick_name;
                            socket.send(JSON.stringify({
                                type: 'reg',
                                content: {
                                    uid: uuid,
                                    type: 'friend',
                                    avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqjEAyDlaibCbgRpiatq6BNc4XM6YH7vKIEamdbTeTtfJaTCIZlMhvsOWTdaGJz2B0viaw5gmMzAYrxA/132',
                                    username: uuid,
                                    nick_name: nick_name,
                                    groupid: 1,
                                    id: uuid,
                                    sign: '注册：2020-11-01 16:05:30'
                                }
                            }));
                        }
                    });
                    break;

                default:
                    console.log(e);
            }
        };
        //监听发送消息
        layim.on('sendMessage', function (res) {
            var msg = {
                type: 'msg',
                data: res
            };
            // console.log(data);
            //发送消息Socket服务
            socket.send(JSON.stringify({
                type: 'chatMessage',
                content: res,
            }));
            // $.post("/im/index/sendmsg",msg,function(res){
            // });
        });

        //离线反馈
        function outline() {
            layer.msg('对方离线');
        }

        function online(e) {
            layer.msg("【" + e.user.username + '】上线了，打开在线好友列表和TA聊聊吧', {
                shift: 6,
                offset: 0,
                time: 9000
            });
            e.user.groupid = 2;
            layim.addList(e.user);
            layim.setFriendStatus(e.user.id, 'online');
            $(".num").text(e.num);
        }


        //搜索好友&群
        $(document).on('click', "#add-new-friend-btn", function () {
            $.post('{{url('chat/search')}}', {
                _token: '{{csrf_token()}}',
                query: $("#add-new-friend-input").val()
            }, function (res) {
                var friend = '';
                var group = '';
                if (res.msg === 'success') {
                    if (res.data.hasOwnProperty('friend')) {
                        friend = '<li><div><img src="' + res.data.friend.avatar + '"></div><span>' + res.data.friend.nick_name + '</span><span style="float: right;margin-top: 5px"><a class="layui-btn layui-btn-sm" id="add-friend" href="javascript:;"  onclick="add_friend(\'' + res.data.friend.id + '\')">添加</a></span></li>'
                    }
                    if (res.data.hasOwnProperty('group')) {
                        group = '<li><div><img src="' + res.data.group.avatar + '"></div><span>' + res.data.group.group_name + '</span><span style="float: right;margin-top: 5px"><a class="layui-btn layui-btn-sm" id="add-group" href="javascript:;" onclick="add_group(\'' + res.data.group.id + '\')">添加</a></span></li>'
                    }
                    $("#add-list").remove();
                    $(".search").append('<div id="add-list" class="layim-tab-content layui-show" style="margin-top: 10px">' +
                        '<ul class="layim-list-friend">' +
                        '<ul class="layui-layim-list layui-show layim-list-history">' +
                        friend + group +
                        '</ul>' +
                        '</ul></div>');
                }else{
                    layer.msg(res.msg);
                }
            })
        });

        window.add_friend = function add_friend(id) {
            var btn = $('#add-friend');
            $.post('{{url('chat/add')}}', {
                _token: '{{csrf_token()}}',
                id: id,
                type: 'friend'
            }, function (res) {
                if (res.msg === 'success') {
                    btn.addClass('layui-btn layui-btn-disabled');
                    btn.css("pointer-events", "none");
                } else {
                    btn.removeClass('layui-btn-disabled');
                    btn.css("pointer-events", '');
                }
            });
        };

        window.add_group = function add_group(id) {
            var btn = $('#add-group');
            $.post('{{url('chat/add')}}', {
                _token: '{{csrf_token()}}',
                id: id,
                type: 'group'
            }, function (res) {
                if (res.msg === 'success') {
                    btn.addClass('layui-btn layui-btn-disabled');
                    btn.css("pointer-events", "none");
                } else {
                    btn.removeClass('layui-btn-disabled');
                    btn.css("pointer-events", '');
                }
            });
        };
        window.add_assent = function add_group(id,index) {
            var btn = $('.add_assent'+index);
            console.log(btn);
            $.post('{{url('chat/add_assent')}}', {
                _token: '{{csrf_token()}}',
                id: id,
            }, function (res) {
                if (res.msg === 'success') {
                    btn.addClass('layui-btn layui-btn-disabled');
                    btn.css("pointer-events", "none");
                } else {
                    btn.removeClass('layui-btn-disabled');
                    btn.css("pointer-events", '');
                }
            });
        };

    })

</script>
</html>
      